<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="账号信息" name="accountInformation">
                <div class="w-50 px-76">
                    <el-form label-width="100px" :model="accountInformationForm" :rules="accountInformationFormRules" ref="ruleForm">
                        <el-form-item>
                            <div class="d-flex-center" style="flex-direction: column">
                                <div style="width: 80px; height: 80px; border: 1px solid red; border-radius: 50%"></div>
                                <Button type="primary" style="position: relative">修改</Button>
                                <span>{{ tip3 }}</span>
                            </div>
                        </el-form-item>
                        <el-form-item label="真实姓名" prop="name">
                            <el-input v-model="accountInformationForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="gender">
                            <el-radio-group v-model="accountInformationForm.resource">
                                <el-radio label="男"></el-radio>
                                <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="公司名称" prop="companyName">
                            <el-input v-model="accountInformationForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="name">
                            <el-input v-model="accountInformationForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="所在部门" prop="name">
                            <el-input v-model="accountInformationForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="担任的职位" prop="name">
                            <el-input v-model="accountInformationForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="工作邮箱" prop="name">
                            <el-input v-model="accountInformationForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="工作电话" prop="workPhone">
                            <el-input v-model="accountInformationForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="传真" prop="fax">
                            <el-input v-model="accountInformationForm.name"></el-input>
                        </el-form-item>
                        <el-form-item class="ml-36 pl-100 mb-28">
                            <el-button type="primary">修改</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="密码修改" name="changePassword">
                <div class="w-30 px-12">
                    <el-form>
                        <el-form-item>
                            <el-input placeholder="原始密码" v-model="input" show-password></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input placeholder="新密码" v-model="input" show-password></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input placeholder="确认密码" v-model="input" show-password></el-input>
                        </el-form-item>
                        <el-form-item class="d-flex-center">
                            <el-button type="primary">修改</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="账号安全" name="accountSecurity">
                <div class="w-100 d-flex-center" style="flex-direction: column">
                    <div class="w-95 d-flex-between-center ml-1 mr-1" style="height: 70px; border-bottom: 2px solid #eceff8">
                        <div>
                            <div>账户密码</div>
                            <div>
                                <span class="textclass">当前密码强度：</span>
                                <span :class="dynamicStyle">中{{ strengthGrade }}</span>
                            </div>
                        </div>
                        <div style="color: #56a2f4; cursor: pointer" @click="changePassword()">修改</div>
                    </div>
                    <div class="w-95 d-flex-between-center ml-1 mr-1" style="height: 70px; border-bottom: 2px solid #eceff8">
                        <div>
                            <div>绑定手机</div>
                            <div>
                                <span class="textclass">已绑定手机：</span>
                                <span class="textclass">15890115036</span>
                            </div>
                        </div>
                        <div style="color: #56a2f4; cursor: pointer" @click="changeMobilePhoneNumber()">修改</div>
                    </div>
                    <div class="w-95 d-flex-between-center ml-1 mr-1" style="height: 70px; border-bottom: 2px solid #eceff8">
                        <div>
                            <div>密保问题</div>
                            <div><span class="textclass">未设置密保问题，密保问题可有效保护账户安全</span></div>
                        </div>
                        <div style="color: #56a2f4; cursor: pointer">暂不支持设置</div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import UploadPicture from '@/components/uploadPicture/uploadPicture.vue';

export default {
    components: { UploadPicture },
    data() {
        return {
            activeName: 'accountInformation',
            accountInformationForm: [],
            accountInformationFormRules: {
                name: [{ required: true }]
            }
        };
    },
    methods: {
        changePassword: function () {
            this.activeName = 'changePassword';
        },
        changeMobilePhoneNumber: function () {
            this.$router.push('changePhone');
        }
    }
};
</script>
